<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import {addShopApi} from '@/service/shop.js'; // 假设你有一个添加门店的 API

const emit = defineEmits(['reload']);
const fetchShopList = () => {
  emit('reload');
}

const drawerVisible = ref(false);
const shopForm = ref({
  title: '',
  address: '',
  // 其他门店信息字段
});

const rules = ref({
  title: [
    {required: true, message: '请输入门店名称', trigger: 'blur'},
  ],
  address: [
    {required: true, message: '请输入地址', trigger: 'blur'},
  ],
  // 其他验证规则
});

// 重置form表单
const resetForm = () => {
  shopForm.value = {
    title: '',
    address: '',
    // 其他门店信息字段
  };
};

// 显示添加门店的抽屉，并清空表单
const showAddShopDrawer = () => {
  drawerVisible.value = true;
  resetForm();
};

const handleAddShop = async () => {
  try {
    const resp = await addShopApi(shopForm.value);
    if (resp.code === 200) {
      ElMessage.success(resp.msg);
      drawerVisible.value = false;
      // 添加成功后，刷新门店列表
      fetchShopList();
    } else {
      ElMessage.error(resp.msg);
    }

  } catch (error) {
    ElMessage.error('门店添加失败，请稍后重试');
  }
};

defineExpose({
  showAddShopDrawer
});
</script>

<template>
  <el-drawer
      title="添加门店"
      v-model="drawerVisible"
      size="20%"
      header-class="drawer-header"
  >
    <el-form :model="shopForm" :rules="rules" ref="shopFormRef" label-width="100px" label-position="top">
      <el-form-item label="门店名称" prop="title">
        <el-input v-model="shopForm.title" placeholder="请输入门店名称"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="shopForm.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button type="primary" @click="handleAddShop">提交</el-button>
        <el-button @click="drawerVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="less">
.drawer-header {
  background-color: #f0f2f5;
}
</style>
